<template>
  <BasicForm @register="register" />
  <PageWrapper
    title="选中以下机构开通的项目配置分润"
    content="以下合作支付项目为机构开通功能中带有支付相关的项目，该类型项目机构都可以设置相应的费用，与平台达成商务合作后，到配置是否分佣及平台抽佣比例。"
  >
    <BasicTable
      @register="registerTable"
      @edit-end="handleEditEnd"
      @edit-cancel="handleEditCancel"
      :beforeEditSubmit="beforeEditSubmit"
      :pagination="false"
    >
      <!-- <template #footer>
          </template> -->
    </BasicTable>
    <div style="margin-top: 10px"
      >说明：抽佣比例为0则不编辑，设置抽佣比例后对应的费用将进入到机构自己绑定的商户号中</div
    >
  </PageWrapper>

  <div class="action">
    <a-button style="margin-right: 10px" @click="handleReset">重置</a-button>
    <a-button type="primary" @click="handleSave" :loading="submitLoading">保存</a-button>
  </div>
</template>

<script setup lang="ts">
  import { BrokerageConfigList, BrokerageConfigSave } from '@/api/institution/list';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { BasicTable, useTable } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { inject, Ref, ref } from 'vue';
  import { IBrokerageConfigListResData } from '@/api/institution/model/listModel';
  import { useMessage } from '@/hooks/web/useMessage';

  const dataId = inject('dataId') as Ref<string | number>;
  const dataSource = ref<IBrokerageConfigListResData[]>();
  const submitLoading = ref(false);
  const { createMessage } = useMessage();

  const [register] = useForm({
    schemas: [
      {
        field: 'divider-basic',
        component: 'Divider',
        label: '分润设置',
        colProps: {
          span: 24,
        },
      },
    ],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 200,
    showActionButtonGroup: false,
  });

  const [registerTable, { reload, setTableData }] = useTable({
    api: BrokerageConfigList,
    beforeFetch: () => dataId.value,
    columns: [
      {
        title: '合作支付项目',
        dataIndex: 'projectName',
      },
      {
        title: '平台抽佣比例',
        dataIndex: 'percent',
        edit: true,
        editComponent: 'InputNumber',
        editComponentProps: {
          suffix: '%',
          placeholder: '请输入',
          max: 100,
          min: 0,
        },
      },
      {
        title: '备注',
        dataIndex: 'remark',
        edit: true,
        editComponent: 'Input',
        editComponentProps: {
          placeholder: '请输入',
        },
      },
    ],
    canResize: false,
    showIndexColumn: false,
    bordered: true,
    afterFetch: (data: IBrokerageConfigListResData[]) => {
      console.log('data--->', data);
      dataSource.value = data || [];
    },
  });

  function handleEditEnd({ record, index, key, value }: Recordable) {
    console.log(record, index, key, value);
    return false;
  }

  function handleEditCancel() {
    setTableData(dataSource.value as any);
  }

  async function beforeEditSubmit({ record, index }) {
    let item = dataSource.value && dataSource.value[index];
    dataSource.value?.splice(index, 1, {
      ...record,
      projectType: item?.projectType,
    });
  }

  function handleReset() {
    reload();
  }

  async function handleSave() {
    submitLoading.value = true;
    await BrokerageConfigSave({
      orgId: dataId.value,
      // tenantId: 1001,
      orgBrokerageConfigList: dataSource.value,
    });
    submitLoading.value = false;
    createMessage.success('保存成功');
  }
</script>

<style lang="less" scoped>
  .action {
    display: flex;
    justify-content: flex-end;
  }
</style>
